import { defineComponent, reactive } from "vue";
import styles from "./paymentPopup.module.less";
import { CloseOutlined } from "@ant-design/icons-vue";
import { imgPath } from "@/common/utils";
export default defineComponent({

  setup(props, { expose }){
    const state = reactive({
      isShow:false,
      QRcodeList:[
        {
          text:'通联支付二维码',
          img:imgPath('/userCenter/allInPay.png'),
        },
        {
          text:'支付宝支付二维码',
          img:imgPath('/userCenter/alipayQRcode.png'),
        },
        {
          text:'微信支付',
          img:imgPath('/userCenter/WeChatQRcode.png'),
        },
      ],
      qrcode_id:'',
    } as any)
    //打开弹窗
    const open = (e:any) =>{
      state.isShow = true;
      state.qrcode_id = e.qrcode_id;
      console.log(state.qrcode_id)
    }
    expose({
      open,
    })
    return () =>(
      <div class={styles.paymentPopup} v-show={state.isShow}>
        <div class={styles.card}>
          <div class={styles['header-box']}>
            <span class={styles.title}>宁波世纪美亚国际旅行社有限公司</span>
            <CloseOutlined class={styles['close-icon']} onClick={() => { state.isShow = false  }}/>
          </div>
          <div class={styles.container}>
            <div class={styles.title}>在线充值</div>
            <div class={styles['qrcode-box']}>
              {/* {state.QRcodeList[Number(state.qrcode_id)].text} */}
              <img src={state.QRcodeList[Number(state.qrcode_id)].img}/>
            </div>
          </div>
        </div>
      </div>
    )
  }
})